<template>
  <view class="h-100%">
    <component :is="pageTab" class="h-100%"></component>
    <wd-tabbar @change="changeTab" fixed v-model="tabbar" bordered safeAreaInsetBottom placeholder>
      <wd-tabbar-item title="首页" icon="home"></wd-tabbar-item>
      <wd-tabbar-item title="创建比赛" icon="add-circle"></wd-tabbar-item>
      <wd-tabbar-item title="我的比赛" icon="view-module"></wd-tabbar-item>
      <wd-tabbar-item title="用户中心" icon="user-circle"></wd-tabbar-item>
    </wd-tabbar>
  </view>
</template>

<script lang="ts" setup>
import Home from '../home/home.vue'
import personal from '../personal/personal.vue'
import myTournamentList from '../myTournamentList/myTournamentList.vue'
import { ref } from 'vue'

const tabbar = ref(0)
const pageTab = ref(Home)

const changeTab = (newTabIndex) => {
  const tabIndex = newTabIndex.value
  switch (tabIndex) {
    case 0:
      pageTab.value = Home
      break
    case 2:
      pageTab.value = myTournamentList
      break
    case 3:
      pageTab.value = personal
      break
    case 1:
      uni.navigateTo({
        url: '/pages/tournament/add',
      })
      break
  }
}
</script>
